// 原生方式获取文件
// import React, { Component } from 'react'

// export default class App extends Component {

//   state = {
//     file:""
//   }
//   componentDidMount(){
//     document.getElementById("file").addEventListener("change",function(e){
//       console.log(e.target.files);
//     })
//   }
//   render() {
//     return (
//       <div>
//         <input type="file" id="file"/>
//       </div>
//     )
//   }
// }

// ref方式
import React, { Component } from "react";

class App extends Component {
  constructor(props) {
    super(props);

    // 创建一个ref  ref 方式一
    this.fileRef = React.createRef();

    // 定义状态
    this.state = {
      value: "点击按钮后自动获取焦点，这个输入框只读",
    };
  }

  // 点击获取文件名 （当没有选择文件时，点击按钮会报错）
  handleClickFile = () => {
    console.log(this.fileRef.current.files[0].name); //获取文件名称
    console.log(this.fileRef.current); //获取当前的dom元素节点
  };

  // 点击自动获取焦点
  handleFocusClick = () => {
    console.log(this.Focus);
    this.Focus.focus();
  };
  handleChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  };

  // ref方式三
  handleDomInputClick = () => {
    console.log(this.domInput)
  }
  render() {
    return (
      <div>
        {/* ref方式一 */}
        <input type="file" ref={this.fileRef} id="file" />
        <button onClick={this.handleClickFile}>获取file的Dom元素</button>
        <hr />
        {/* ref方式二 */}
        <input
          type="text"
          ref={(inputA) => {
            this.Focus = inputA;
          }}
          value={this.state.value}
          id="focus"
          onChange={this.handleChange}
          style={{ width: "300px" }}
        />
        <button onClick={this.handleFocusClick}>
          点击后输入框自动获取焦点
        </button>

        <hr />
        {/* ref方式三  不要使用这种方式 react 控制台会报错 可能现在版本更新导致*/}
        {/* <input type="text" ref="domInput" placeholder="我是ref的第三种方式" />
        <button onClick={this.handleDomInputClick}>点击获取输入框的dom结构</button> */}
      </div>
    );
  }
}

export default App;
